﻿@using BlazorSortableList.DemoApp.Client.Models
@inject IPersistenceSample PersistenceSample

<style>
    /*  .sortable-ghost {
                            background-color: white;
                            border: 1px solid green;
                            opacity: 1;
                        } */

    .sortable-chosen {
        opacity: 0.7;
        border: 1px dotted red;
    }
</style>

@* Note: Very important that direct children will be in the same component *@
@*       In other case new component marker (empty comment) will destroy JS layout *@

<div class="container">
    <h1 class="title is-size-1 has-text-centered">Nested Lists and persistence</h1>
    <p class="mb-4">You can rearrange items within each level and drag items between levels.</p>
    <TabControl>
        <TabPage Title="Example">
            <div class="columns" style="width: 98%">
                <div class="column" style="background-color: #00bfff;">
                    <SortableList Id="@ListIdRoot" GroupModel="@_group" Context="item">
                        <SortableItemTemplate>
                            <div class="card has-border-light has-background-blazor1">
                                <p class="is-size-4 p-2 ml-4">@item.Name</p>
                                @if (item.Children != null)
                                {
                                    <SortableListNested NestedIdPrefix="@ListIdNested" Item="item" GroupModel="@_group" />
                                }
                            </div>
                        </SortableItemTemplate>
                    </SortableList>
                </div>
            </div>
        </TabPage>
        <TabPage Title="Code">
            <pre>@codeContent1</pre>
        </TabPage>
    </TabControl>


</div>
@code {
    private const string ListIdRoot = "NestedListIdRoot2";
    private const string ListIdNested = "NestedListId2";
    private const string GroupId = "BoardGroup2";

    private string codeContent1 = @"@* Simplified version! *@

    <SortableList Id=""@ListIdRoot"" GroupModel=""@_group"" Context=""item"">
        <SortableItemTemplate>
            <div class=""card has-border-light has-background-blazor1"">
                <p class=""is-size-4 p-2 ml-4"">@item.Name</p>
                @if (item.Children != null)
                {
                    <SortableListNested NestedIdPrefix=""@ListIdNested"" Item=""item"" GroupModel=""@_group"" />
                }
            </div>
        </SortableItemTemplate>
    </SortableList>
    @code {
        private const string ListIdRoot = ""NestedListIdRoot"";
        private const string ListIdNested = ""NestedListId"";
        private const string GroupId = ""BoardGroup"";

        public List<Item> items1 = ...;
        public List<Item> items2 = ...;
        public List<Item> items3 = ...;
        public List<Item> items3 = ...;

        ThreeSortableListGroup _group;

         _group = new NestedSortableListGroup(() => StateHasChanged());
        protected override async Task OnInitializedAsync()
        {
            await base.OnInitializedAsync();
            _group = new NestedSortableListGroup(() => StateHasChanged());
            items2[1].Children = items3;
            rootItems[0].Children = items2;
            rootItems[3].Children = items4;
            var settings = new SortableListSettings() { FallbackOnBody = true, SwapThreshold = 0.65 };

            _group.AddModel(ListIdRoot, new SortableListModel<NestedItem>(rootItems) { Group = GroupId, Settings = settings });
            foreach (var item in rootItems)
            {
                if (item.Children != null)
                {
                    AddNestedModel(item, settings);
                }
            }
        }

        private void AddNestedModel(NestedItem item, SortableListSettings settings)
        {
            if (item.Children != null)
            {
                _group.AddModel($""{ListIdNested}{item.Id}"", new SortableListModel<NestedItem>(item.Children) { Group = GroupId, Settings = settings });
                foreach (var child in item.Children)
                {
                    if (child.Children != null)
                    {
                        AddNestedModel(child, settings);
                    }
                }
            }
        }
    }
    ";

    NestedSortableListGroup _group;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        _group = new NestedSortableListGroup(UpdateComponent);
        var rootItems = PersistenceSample.GetRootItems();
        var settings = new SortableListSettings() { FallbackOnBody = true, SwapThreshold = 0.65 };

        _group.AddModel(ListIdRoot, new SortableListModel<NestedItem>(rootItems) { Group = GroupId, Settings = settings });
        foreach (var item in rootItems)
        {
            if (item.Children != null)
            {
                AddNestedModel(item, settings);
            }
        }
    }

    private void UpdateComponent()
    {
        ISortableListModel<NestedItem>? model = _group.GetModel(ListIdRoot);

        if (model != null)
        {
            // for real database use asynchronous call inside
            // it must be no "big" delay here
            PersistenceSample.StoreRootItems(model.Items);
        }
        StateHasChanged();
    }

    private void RefreshControl()
    {
        //for debugging only
        ISortableListModel<NestedItem>? model = _group.GetModel(ListIdRoot);

        StateHasChanged();
    }

    private void AddNestedModel(NestedItem item, SortableListSettings settings)
    {
        if (item.Children != null)
        {
            //_group.AddModel($"{ListIdNested}-{level}.{item.Id}", new SortableListModel<NestedItem>(item.Children) { Group = GroupId });
            _group.AddModel($"{ListIdNested}{item.Id}", new SortableListModel<NestedItem>(item.Children) { Group = GroupId, Settings = settings });
            foreach (var child in item.Children)
            {
                if (child.Children != null)
                {
                    AddNestedModel(child, settings);
                }
            }
        }
    }
}
